<template>
	<view >
		<view class="cflex-r" style="justify-content: center;align-items: center;height: 76rpx;background-color: white;">
			<view class="cflex-c" style="flex: 1;justify-content: center;align-items: center;"
			@tap="onTabClick(index)"
			 v-for="(item,index) in tabLists" :key="index">
				<view :style="{color:item.isSelect?'#333333':'#999999',fontWeight:item.isSelect?'bold':'normal'}">
					{{item.text}}
				</view>
				<view :style="{opacity:item.isSelect?1:0}" class="cbg-zhuti u-m-t-2" style="height: 8rpx;width: 60rpx;">
				</view>
			</view>
		</view>
		<view class="u-m-t-20 u-p-l-20 u-p-r-20" v-for="(item,index) in lists" :key="index">
			<view class="cflex-r u-p-r-30" :style="{backgroundColor:item.status==1? '#E2E2E2':item.params.isGuoQi==1?'#E2E2E2':'#FFDBDB'}" style="justify-content: space-between;height: 180rpx;border-radius: 16rpx;align-items: center;">
				<view class="cflex-r" style="justify-content: center;align-items: center;">
					<view class="cflex-c" style="width: 200rpx;align-items: center;justify-content: center;">
						<view class="cflex-r" style="align-items: center;justify-content: center;color: #FF5400;">
							<view class="u-font-12" style="margin-top: 10rpx;"  :style="{color:item.status==1?'#333333':item.params.isGuoQi==1?'#333333':'#FF5400'}">¥</view>
							<view class="u-m-l-5" style="font-size: 40rpx; font-weight: bold;"  :style="{color:item.status==1?'#333333':item.params.isGuoQi==1?'#333333':'#FF5400'}">{{item.price}}</view>
						</view>
						<view class="u-m-t-5" >
							<view class=" u-p-l-15 u-p-r-15 u-p-t-5 u-p-b-5" :style="{backgroundColor:item.status==1?'#F3F3F3':item.params.isGuoQi==1?'#F3F3F3':'#FEABAB',color:item.status==1?'#ADADAD':item.params.isGuoQi==1?'#ADADAD':'#FF5400'}" style="border-radius: 20rpx;font-size: 12rpx;">线上优惠券</view>
						</view>
						
					</view>
					
					<view class="cflex-c ">
						<view style="font-weight: bold;font-size: 32rpx;" :style="{color:item.status==1?'#333333':item.params.isGuoQi==1?'#333333':'#FF5400'}">
							满{{item.tiaoJian}}可用
						</view>
						<view class="u-font-12 u-m-t-10" :style="{color:item.status==1?'#666666':item.params.isGuoQi==1?'#666666':'#FF5400'}">
							有效期至{{item.sxTime}}
						</view>
					</view>
				</view>
				<view v-if="item.status==1" style="margin-right: -10rpx;">
					<image src="../../static/qieTu/yiShiYong.png" style="width: 134rpx;height: 96rpx;"></image>
				</view>
				<view v-else>
					<view v-if="item.status == 0 && item.params.isGuoQi == 0" class=" u-p-l-20 u-p-r-20 u-p-t-5 u-p-b-5" style="color:#FF5400 ;border: 1rpx solid #FF5400;border-radius: 30rpx;"
					@tap="useCoupon()">去使用</view>
					
					<image v-else src="../../static/qieTu/yiGuoQi.png" style="width: 134rpx;height: 96rpx;"></image>
				</view>
			</view>
		</view>
		<view v-if="lists.length===0" class="cflex-r-c" style="width:100%;height:600rpx;">
			<u-empty  text="暂无优惠券" mode="coupon"></u-empty>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				tabLists:[
					{text:"全部",isSelect:true},
					{text:"已使用",isSelect:false},
					{text:"已过期",isSelect:false}
				],
				current:0,
				status: [0,1,2],
				lists:[]
			}
		},
		onShow() {
			this.youHui();
		},
		onLoad(options) {
			
		},
		computed: {
			
		},
		methods: {
			youHui(){
				let status = this.status[0];
				this.$request('kehu/other/couponList',{status:status}).then(res=>{
					 //console.log(res);
					this.lists = res.data;
				})
			},
			onTabClick(index){
				this.tabLists[this.current].isSelect = false;
				this.tabLists[index].isSelect = true;
				this.current = index;
				// 请求数据
				let status = this.status[index];
				 //console.log(status);
				this.$request('kehu/other/couponList',{status:status}).then(res=>{
					this.lists = res.data;
				})
			},
			useCoupon(){
				uni.switchTab({
					url:'../../pages/tab1'
				})
			}
		}
	}
</script>

<style >
	page{
		background-color: #F6F7F8;
	}
</style>
